<page-header autoTitle="false" />
<nz-card>
  <div nz-row>
    <nz-card nz-col [nzSpan]="8" nzTitle="菜单列表" [nzExtra]="extraTemplate">
      <nz-tree
        #nzTreeComponent
        [nzData]="menuTree"
        (nzDblClick)="treeNodeDbClick($event)"
        (nzClick)="treeNodeClick($event)"
        nzDraggable
        nzBlockNode
        (nzOnDrop)="nzDrop($event)"
        nzShowIcon
      />
    </nz-card>
    <ng-template #extraTemplate>
      <nz-button-group>
        <button nz-button nzType="dashed" (click)="addMenu()"> <i nz-icon nzType="plus"></i>同级 </button>
        <button nz-button nzType="dashed" (click)="addSubMenu()"> <i nz-icon nzType="plus"></i>下级 </button>
        <button nz-button nzType="dashed" (click)="editMenu()"> <i nz-icon nzType="edit"></i>修改 </button>
      </nz-button-group>
    </ng-template>
    <nz-card nz-col [nzSpan]="16" [nzTitle]="menuTitle" [nzLoading]="cardIsLoading()">
      <div se-container="1">
        <se label="菜单名称" col="2" required>
          <input nz-input name="text" placeholder="请输入菜单名称" [(ngModel)]="currentRecord!.text" />
        </se>
        <se label="菜单组" col="2">
          <nz-switch name="group" [(ngModel)]="currentRecord!.group" />
        </se>
        <se label="路由地址" optionalHelp="路由地址和外部地址必须填写一个">
          <input
            nz-input
            name="link"
            placeholder="请输入前端的路由地址"
            [(ngModel)]="currentRecord!.link"
            [disabled]="currentRecord!.group"
          />
        </se>
        <se label="外部地址">
          <input nz-input name="externalLink" placeholder="请输入外部地址" [(ngModel)]="currentRecord!.externalLink" />
        </se>
        <se label="选择打开方式">
          <nz-select style="width: 100%" [(ngModel)]="currentRecord!.target" [nzDisabled]="!currentRecord!.externalLink" nzAllowClear>
            <nz-option nzValue="_blank" nzLabel="_blank" />
            <nz-option nzValue="_self" nzLabel="_self" />
            <nz-option nzValue="_parent" nzLabel="_parent" />
            <nz-option nzValue="_top" nzLabel="_top" />
          </nz-select>
        </se>
        <se label="选择图标" col="2">
          <nz-row [nzGutter]="8">
            <nz-col [nzSpan]="3">
              <i nz-icon [nzType]="currentRecord!.icon"></i>
            </nz-col>
            <nz-col [nzSpan]="21">
              <nz-select style="width: 100%" [(ngModel)]="currentRecord!.icon" nzAllowClear>
                <nz-option nzCustomContent *ngFor="let o of menuIconList" [nzValue]="o.name" [nzLabel]="o.name">
                  <i nz-icon [nzType]="o.name"></i>
                  {{ o.code }}
                </nz-option>
              </nz-select>
            </nz-col>
          </nz-row>
        </se>
        <se label="多语言标识" optionalHelp="多语言标识必须和前端语言配置一致">
          <input nz-input name="i18n" placeholder="请输入多语言标识" [(ngModel)]="currentRecord!.i18n" />
        </se>
        <se label="徽标数字" col="2">
          <input nz-input type="number" name="badge" placeholder="请输入多语言标识" [(ngModel)]="currentRecord!.badge" />
        </se>
        <se label="排序序号" col="2">
          <input nz-input name="sort" placeholder="请输入排序序号" [(ngModel)]="currentRecord!.sort" />
        </se>
        <se label="快捷菜单" col="3">
          <nz-switch name="shortcut" [(ngModel)]="currentRecord!.shortcut" />
        </se>
        <se label="快捷菜单组" col="3">
          <nz-switch name="shortcutRoot" [(ngModel)]="currentRecord!.shortcutRoot" />
        </se>
        <se label="启用状态" col="3">
          <nz-switch name="disabled" [(ngModel)]="!currentRecord!.disabled" />
        </se>
        <se>
          <button nz-button nzType="primary" (click)="saveMenuTree()" [disabled]="cardIsLoading()">保存</button>
          <button nz-button nzType="default" (click)="deleteMenuTree()" [disabled]="!this.currentRecord.id">删除</button>
        </se>
      </div>
    </nz-card>
  </div>
</nz-card>
